<template>
  <div class="user">
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @handleSearch="handleSearchFn"
      @handleReset="handleResetFn"
    ></PageSearch>
    <PageTable
      :tableConfig="tableConfig"
      pageName="users"
      ref="pageTableRef"
      title="用户数据"
      AddDataName="新增用户"
      @handleAddFn="handleAddFn"
      @handleEditFn="handleEditFn"
    >
      <template #status="scope">
        <el-button :type="scope.row.enable ? 'primary' : 'danger'"
          >{{ scope.row.enable ? "启用" : "停用" }}
        </el-button>
      </template>
    </PageTable>
    <div class="dialog">
      <PageDialog
        ref="pageDialogRef"
        :dialogConfig="newPageDiaLog"
        :defaultInfo="defaultInfo"
        pageName="users"
      ></PageDialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

//导入搜索栏配置文件
import PageSearch from "@/components/page-search/index";
import { searchFormConfig } from "./config/userFormConfig";
//导入表格配置文件
import PageTable from "@/components/page-table/index";
import { tableConfig } from "./config/userTableConfig";
//导入搜索的逻辑
import { usePageSearch } from "@/hooks/usePageSearch";
import { usePageDialog } from "@/hooks/usePageDialog";
import PageDialog from "@/components/page-dialog";
//导入弹出的对话框配置文件
import { dialogConfig } from "./config/userDialogConfig";

import { useStore } from "@/store";

export default defineComponent({
  name: "user",

  components: {
    PageSearch,
    PageTable,
    PageDialog,
  },

  setup() {
    const store = useStore();
    const { handleSearchFn, pageTableRef, handleResetFn } = usePageSearch();

    // 新增用户的时候可以输入密码，编辑的时候不能编辑密码
    const addData = () => {
      const passwordItem = dialogConfig.formItems.find(
        (item) => item.filed === "password"
      );
      passwordItem!.isHidden = false;
    };
    const editData = () => {
      const passwordItem = dialogConfig.formItems.find(
        (item) => item.filed === "password"
      );
      passwordItem!.isHidden = true;
    };

    const { handleAddFn, pageDialogRef, handleEditFn, defaultInfo } =
      usePageDialog(addData, editData);


    const newPageDiaLog = computed(() => {
      //因为网络请求是异步请求，返回的数据赋值之后，不会引起模板的刷新，导致数据不会变化
      // 解决办法， dialogconfig ，由计算属性生成，里面的数据改变之后，会引起模板的重新解析
      //给选择部门赋值
      const departmentItem = dialogConfig.formItems.find(
        (item) => item.filed === "departmentId"
      );
      departmentItem!.options = store.state.departmentList.map((item) => {
        return { title: item.name, value: item.id ,label:item.name };
      });

      //给选择角色赋值
      const roleItem = dialogConfig.formItems.find(
        (item) => item.filed === "roleId"
      );
      roleItem!.options = store.state.roleList.map((item) => {
        return { title: item.name, value: item.id,label:item.name };
      });
      return dialogConfig;
    });




    return {
      searchFormConfig,
      tableConfig,
      handleSearchFn,
      pageTableRef,
      handleResetFn,
      dialogConfig,
      handleAddFn,
      pageDialogRef,
      handleEditFn,
      defaultInfo,
      newPageDiaLog,
    };
  },
});
</script>

<style lang='less' scoped>
.action {
  padding-right: 25px;
}
.dialog {
  text-align: center;
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
